<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script>
    function defineTheme(themeParams) {
      const theme = { a: 1 };
      return () => theme;
    }

    function useTheme() {
      const theme = defineTheme();
      return theme();
    }
    function setTheme(th) {
      const theme = useTheme();
      theme.a = th;
      console.log(theme.a);
      // console.log(' th ==== ', th.value);
      // theme.value = th.value;
      // watch(
      //   th,
      //   (newval) => {
      //     console.log(' th.theme ==== ', newval);
      //     theme.value = newval;
      //     console.log(' th.theme   theme.value  ==== ', theme.value);
      //   },
      //   { immediate: true }
      // );
      // watchEffect(() => {
      //   console.log(' th.theme ==== ', th);
      // });
    }

    setTheme(2);
    console.log(useTheme().a);
  </script>
</body>

</html>